<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>ChatRoom</title>
	<link href="__CSS__/bootstrap.min.css?v=3.3.6" rel="stylesheet">
	<link href="__CSS__/font-awesome.min.css?v=4.4.0" rel="stylesheet">
	<link href="__CSS__/animate.min.css" rel="stylesheet">
	<link href="__CSS__/style.min.css?v=4.1.0" rel="stylesheet">
	<link href="__CSS__/conversation.css" rel="stylesheet">
	<link href="__JS__/layui/css/layui.css" rel="stylesheet">
</head>
<body>
	<div id="ConversationBox">
		<div id="height">
			{$MSG.msg}
		</div>
	</div>
	<div id="sendBox"><textarea id="editorBox"></textarea></div>
	<button id="send-btn">发送</button>
	<button id="send-type-btn">Enter发送</button>
</body>
<script src="__JS__/jquery.min.js?v=2.1.4"></script>
<script src="__JS__/jquery.cookie.js"></script>
<script src="__JS__/plugins/ueditor/ueditor.config.js"></script>
<script src="__JS__/plugins/ueditor/ueditor.all.js"></script>
<script src="__JS__/layui/layui.js"></script>
<script type="text/javascript">
var ws = new WebSocket('{$Webset.socket_addr}');
ws.onopen = function(){
    var uid = "uid:{$ConversationId}_{:session('id')}";
    ws.send(uid);
};
ws.onmessage = function(e){
	var data = JSON.parse(e.data),date = new Date();
	var html = $("#height").html();
		html +='<msg class="user_id_'+data.info.id+'">';
		html +='<img class="user-head" src="'+data.info.head+'"/>';
		html +='<name>'+data.info.real_name+'</name>';
		html +='<time></time>';
		html +='<ct>'+data.msg+'</ct>';
	$("#height").html(html);
	resetCss();
}
</script>
<script type="text/javascript">
$(function(){
	// 重置图片src
	$("img").on("error",function() {
		$(this).attr({'src':"__IMG__/user.png"});
	})

	layui.use("layer");
	var editor_cfg = {
		el:"editorBox", 			// 元素id
		enter_send:1,				// 1:"enter"发送，2:"ctrl + enter" 发送
		height:148,					// 高度
		max_size:255,				// 内容最大长度
		msg_type:"{$MSG.msg_type}",	// 消息类型：0.群聊，1.推送
		toolbars:[					// 工具栏
			['emotion','snapscreen','scrawl','simpleupload']
		],
	}
	var cookiename = "editor_cfg_send_type_{:session('id')}";
	if(typeof($.cookie(cookiename))!="undefined"){
		editor_cfg.enter_send = $.cookie(cookiename);
	}else{
		$.cookie(cookiename,1,{expires:31});
	}
	// ueditor创建
	var editor = UE.getEditor(editor_cfg.el,{
		toolbars:editor_cfg.toolbars,
		initialFrameHeight:editor_cfg.height,
	});
	editor.addListener("keydown", function (type, e) {
		var ev = e || window.event;
		var keyCode = ev.keyCode || ev.which || ev.charCode;
		if(editor_cfg.enter_send == 1){
			if(ev.ctrlKey && ev.keyCode == 13){
				// 换行
				editor.execCommand("insertparagraph");
			}else if(keyCode==13) {
				// 发送
				ev.cancelBubble=true;
				ev.preventDefault();
				ev.stopPropagation();
				$("#send-btn").click();
				return false;
			}
		}else{
			if(ev.ctrlKey && ev.keyCode == 13){
				// 发送
				ev.cancelBubble=true;
				ev.preventDefault();
				ev.stopPropagation();
				$("#send-btn").click();
				return false;
			}
		}
	})
	// change send type
	$("#send-type-btn").on("click",function() {
		if($.cookie(cookiename) == 1){
			$.cookie(cookiename,2,{expires:31});
			editor_cfg.enter_send = 2;
			$("#send-type-btn").html("Ctrl+Enter发送");
		}else{
			$.cookie(cookiename,1,{expires:31});
			editor_cfg.enter_send = 1;
			$("#send-type-btn").html("Enter发送");
		}
	})
	// send
	$("#send-btn").on("click",function() {
		if(editor_cfg.msg_type == 1){
			layer.msg("系统推送内容不可回复~");
			return false;
		}
		var msg = editor.getContent();
		if(msg.length > editor_cfg.max_size){
			layer.msg("发送信息过长，请尝试分段发送~");
			return false;
		}
		if(msg.length == 0){
			layer.msg("发送信息不能为空~");
			return false;
		}
		var param = {
			msg:msg,
			msg_id:"{$ConversationId}"
		}
		$.post('{:url("Socketmsg/Conversation")}',param,function(res){
			if(res.save_db.code == 0){
				layer.msg(res.save_db.msg);
				return false;
			}
			editor.setContent("");
		});
	});
	resetCss();
});
function resetCss() {
	// 自动滚动到底部
	$('#ConversationBox').scrollTop( $('#height')[0].offsetHeight );
	// 重置CSS
	var myMsgBoxName = "#ConversationBox #height .user_id_{:session('id')}";
	$(myMsgBoxName).css({position:'relative',left:'290px'});
	$(myMsgBoxName+" .user-head").css({float:'right'});
	$(myMsgBoxName+" name").css({float:'right',marginRight:"3px"});
	$(myMsgBoxName+" time").css({float:'left'});
	$(myMsgBoxName+" ct").css({background:'rgb(141, 220, 92)',color:"#000",marginRight:"8px"});
	if($.cookie("editor_cfg_send_type_{:session('id')}") == 1){
		$("#send-type-btn").html("Enter发送");
	}else{
		$("#send-type-btn").html("Ctrl+Enter发送");
	}
	// 预览图片
	$("#ConversationBox msg ct img").on("click",function() {
		var src = $(this).attr('src');
		var width = 500;
		var imgct = '<img width="' + width + '" src="' + src + '"/>';
		layer.open({
			type:1,
			title:false,
			area:"500px",
			content:imgct
		})
	})
}
</script>
</html>
